<template>
    <!--博客详细页-->
    <div>
        <Header></Header>
        <div class="m-blog">
            <el-row :gutter="20">
                <el-col :span="2"><h2>{{blog.title}}</h2></el-col>
                <el-col class="buttons" :span="3" v-if="ownBlog">
                    <router-link :to="{name:'BlogAdd',params:{blogId:blog.id}}">
                        <el-button type="primary" icon="el-icon-edit" circle />
                    </router-link>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <h4>{{blog.description}}</h4>
            <el-divider></el-divider>
            <div class="markdown-body" v-html="blog.content"></div>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import "github-markdown-css/github-markdown.css"
    export default {
        name: "BlogDetail",
        components:{Header},
        data(){
            return{
                blog:{
                    id:'',
                    title:'',
                    content:'',
                    description:''
                },
                ownBlog:false
            }
        },
        created() {
            const blogId = this.$route.params.blogId
            const _this=this
            if(blogId){
                this.$axios.get("/blog/"+blogId).then(res => {
                    const blog=res.data.data
                    _this.blog.id=blog.id
                    _this.blog.title=blog.title
                    _this.blog.description=blog.description

                    var MarkdownIt=require("markdown-it")
                    var md = new MarkdownIt()

                    var render = md.render(blog.content);

                    _this.blog.content=render

                    _this.ownBlog= (blog.userId===_this.$store.getters.getUser.id)
                })
            }
        }
    }
</script>

<style scoped>
    .m-blog{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        width: 1200px;
        min-height: 700px;
        padding: 20px 15px;
    }
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .buttons{
        margin-top: 20px;
    }
</style>